<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<link rel="stylesheet" type="text/css" href="{f:uri.resource(path:'Css/style.css')}" />
<script type="text/javascript" src="{f:uri.resource(path:'JavaScript/jquery.validate.min.js')}"></script>
<script type="text/javascript" src="{f:uri.resource(path:'JavaScript/messages_zh.js')}"></script>
<script type="text/javascript" src="{f:uri.resource(path:'JavaScript/com.js')}"></script>

<script type="text/javascript" src="typo3conf/ext/backsite/Resources/Public/Ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="typo3conf/ext/backsite/Resources/Public/Ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="typo3conf/ext/backsite/Resources/Public/Ueditor/lang/zh-cn/zh-cn.js"></script>

<div class="row">
	<div class="form-group col-md-6">
		<label class="control-label" for="title">
			标题<font color="red">*</font>
		</label>
		<f:form.textfield property="title" class="form-control" />
	</div>
	<div class="form-group col-md-6">
		<label class="control-label" for="industry">
			行业分类<font color="red">*</font>
		</label>
		<f:form.select class="form-control"  property="industry" options="{hylist}" optionValueField="uid" optionLabelField="name" prependOptionLabel="--选择行业分类--"/> 
	</div>
</div>

<div class="row">
	<div class="form-group col-md-6">
		<input type="hidden" id="productValue" value="{casetab.product}"/>
		<label class="control-label" for="product">
			产品分类<font color="red">*</font>
		</label>
		<f:form.select class="selectpro form-control spinner" style="width:100%"  id="productSel"  name="product" multiple="multiple"  options="{cplist}" optionValueField="uid" optionLabelField="name" prependOptionLabel="--选择产品分类--"/> 
		<script type="text/javascript">
			var pval = "["+$("#productValue").val().replace(/(^,*)|(,*$)/g, "")+"]";//去除首尾的,然后拼写json字符串 
			if(pval!=""){
				$("#productSel").val($.parseJSON(pval));
			}
		</script>
	</div>
	<div class="form-group col-md-6">
		<label class="control-label" for="labels">
			项目标签<font color="red">*（输入内容后点击“Enter”，可以添加标签）</font>
		</label>
		<input type="hidden" id="selectValue" value="{casetab.labels}"/>
		<f:form.select name="labels" id="labelsId" style="width:100%" class="select2 form-control spinner" multiple="multiple" options="{bqlist}" optionValueField="uid" optionLabelField="name" prependOptionLabel="--选择或输入标签--"/> 
		<script type="text/javascript">
			var jval = "["+$("#selectValue").val().replace(/(^,*)|(,*$)/g, "")+"]";//去除首尾的,然后拼写json字符串 
			if(jval!=""){
				$("#labelsId").val($.parseJSON(jval));
			}
		</script>
	</div>
</div>

<div class="row">
	<div class="form-group col-md-6">
		<label class="control-label" for="spare2">
			网站地址
		</label>
		<f:form.textfield property="spare2" class="form-control" />
	</div>
	<div class="form-group col-md-6">
		<label class="control-label" for="datetime">
			发布时间<font color="red">*</font>
		</label>
		<div class="input-group date bs-datetime datetimepicker-datetime" id="datepicker" data-date-format="yyyy-mm-dd">
	        <f:form.textfield property="datetime" value="{casetab.datetime->f:format.date(format: 'Y-m-d')}" class="form-control spinner" placeholder="Y-m-d"/>
	        <span class="input-group-addon">
	            <button class="btn default date-set" type="button">
	                <i class="fa fa-calendar"></i>
	            </button>
	        </span>
	    </div>
	</div>
</div>

<div class="form-group">
	<label class="control-label" for="image">
		案例图片<font color="red">*</font><font style="font-weight: normal;">(首页和列表页显示，建议尺寸：440px*240px)</font>
	</label>
	<div class="form-inline">
        <div class="input-group ">
            <f:form.upload name="imgpath" id="exampleInputFile"  multiple="multiple" class="form-control spinner"/>
            <p class="help-block"> "仅支持常用图片格式"</p>
        </div>
        <div class="input-group" id="see_image">
            <f:if condition="{casetab.allimage}">
            	<f:for each="{casetab.allimage}" as="img">
	            	<div class="imgborder inline-block oldimg">
		                <img src="uploads/tx_casetab/{img}"  class="inline-block photo-img" height="202" width="160" />
		                <i class="glyphicon glyphicon-remove-circle" onclick="deleteimg(this)" data-img="{img}"></i>
		            </div>
	            </f:for>
            </f:if>
        </div>
    </div>
</div>
<!--<div class="form-group">
	<label class="control-label" for="spare3">
		项目背景<font color="red">*</font>
	</label>
	<f:form.textarea property="spare3" cols="40" rows="3" class="form-control" />
</div>-->
<div class="form-group">
	<label class="control-label" for="spare4">
		应用场景<font color="red">*</font>
	</label>
	<f:form.textarea property="spare4" cols="40" rows="3" class="form-control" />
</div>
<div class="form-group">
	<label class="control-label" for="spare5">
		应用效果<font color="red">*</font>
	</label>
	<f:form.textarea property="spare5" cols="40" rows="3" class="form-control" />
</div>
<div class="form-group">
	<label class="control-label" for="spare6">
		技术要点<font color="red">*</font>
	</label>
	<f:form.textarea property="spare6" cols="40" rows="3" class="form-control" />
</div>
<div class="form-group">
    <label class="control-label">详细内容<font color="red"> *</font></label>
    <f:form.textfield name="ckRichText" id="ckRichText" style="display:none"/>
    <f:form.textarea id="content_bodytext" property="spare1" class="ckeditor" style="width:100%" rows="10"/>
</div>
<f:form.hidden name="uid" id="uid"  value="{casetab.uid}"/>
<f:form.hidden name="ajaxurl" id="ajaxurls"  value="<f:uri.action action='nyajax'/>"/>
<script src="typo3conf/ext/backsite/Resources/Public/scripts/bootstrap-datetimepicker.min.js?" type="text/javascript"></script><script type="text/javascript">
	$("#datepicker").datetimepicker({
		format: 'yyyy-mm-dd',
	    autoclose: true,
	    minView:3,
	    language: 'zh-CN'
	});
	$(document).ready(function(){
		//验证上传文件类型并即时显示
		$("#exampleInputFile").change(function () {
			var message = $("#see_image");
	        // var filepath = $("#exampleInputFile").val();
	        var files = document.getElementById("exampleInputFile");
	        var imgArr = [];
			var text = '';
			if($(message).find('.oldimg').length<0){}
			for (var i = 0; i < files.files.length; i++) {
				var filepath = files.files[i]["name"];
		        var extStart = filepath.lastIndexOf(".");
		        var ext = filepath.substring(extStart, filepath.length).toUpperCase();
		        if (ext == ".PNG" || ext == ".JPG" || ext ==".JPEG") {
		        	console.log(1);
		        	var imgUrl = window.URL.createObjectURL(files.files[i]);
			        imgArr.push(imgUrl);
		        	text+="<div class='inline-block imgborder'><img src='"+imgArr[i]+"' id='preview' class='photo-img' height='100' /></div>"
		        } else {
		        	$("#exampleInputFile").val('');
		          	message.empty();
		          	message.css("color","red");
		          	message.html("仅支持JPG、PNG、JPEG格式的图片");
		          	return false;
		        }
            }
            $(message).find('.imgborder').not('.oldimg').remove();
            if($(message).find('.oldimg').length<0){
            	message.html(text);
            }else{
            	$(message).append(text);
            }
	        return true;
	    });

		jQuery.validator.addMethod("imageCheck", function(value, element) {
		    var tel = true;
		    if($("#exampleInputFile").val()==""){
		    	var pt = "{casetab.image}";
			    if((pt=="" || pt==null)){
				    tel=false;
			    }
		    }
		    return tel;
		}, "请上传一张照片!");

	});
</script>
</html>